<!-- 配送订单 -->
<template>
  <div class="deliveryOrder">
    <div class="deliveryOrder_content">
      <div class="deliveryOrder_content_top">
        <pieChart id="deliveryPieChart" ref="deliveryPieChart" height="100%" width="25%"></pieChart>
        <lineBarChart ref="deliveryLineChart" id="deliveryLineChart" width="72%" height="100%"></lineBarChart>
      </div>
      <div class="deliveryOrder_content_bottom">
        <tableBox class="deliveryTable" :data="deliveryTableData" :show-serial-number="false" :showThead="false" />

      </div>
    </div>
  </div>
</template>
<script>
import headerBox from "../components/header.vue"
import tableBox from "../components/tableBox.vue"
import pieChart from "../components/pieChart.vue"

import lineBarChart from "../components/lineBarChart.vue"
import { getProjectRegionAllocateRate, getAllocateOrderByDayImg, getCommodityTypeAllocateOrderStatusInfoTable } from "@/api/bi/assetsAndMaterials";
export default {
  components: { headerBox, lineBarChart, tableBox, pieChart },
  data() {
    return {
      load: null,
      deliveryTableData: [],
      tableThead: ['', '名称', '库存'],
    }
  },
  mounted() {
    this.load = this.$loading({
      lock: true,
      text: '加载中...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    this.getLineChartData()
    this.getDeliveryRegion()
    this.getTableData()
  },
  methods: {
    // 获取配送区域占比图
    async getDeliveryRegion() {
      const { data: res } = await getProjectRegionAllocateRate();
      let chartData = []
      res.forEach(item => {
        chartData.push({ value: item.allocateRate, name: item.projectRegion })
      })

      let legend = {
        orient: 'vertical',
        right: 0,
        top: 'center',
        bottom: 20,
      }

      let title = {
        text: '区域配送占比',
        left: 'center',
        top: '45%'
      }
      this.$refs.deliveryPieChart.initChart(chartData, legend, title)

    },
    // 当月日度配送订单数组合医
    async getLineChartData() {
      const { data: res } = await getAllocateOrderByDayImg();
      let xAxisData = []
      let legendData = { show: true, data: ['订单总数', '未完成', '已完成'] }
      let seriesData = []
      let dataNum = this.getDaysInMonth()
      for (let i = 1; i <= dataNum; i++) {
        xAxisData.push(i)
      }
      legendData.data.forEach((item, index) => {

        let type = { type: 'line' }
        if (index > 0) {
          type = {
            type: 'bar',
          }
        }
        seriesData.push(
          {
            name: item,
            ...type,
            data: res.dataVal[index],
          },
        )
      })
      let title = {
        text: '当月日度配送订单数组合图',
        left: 'center',
      }
      this.$refs.deliveryLineChart.initChart(legendData, xAxisData, seriesData, title)
    },
    // 获取表格数据
    async getTableData() {

      const { data: res } = await getCommodityTypeAllocateOrderStatusInfoTable();

      let style = "background: #EEEFF3;border-right:1px solid #fff"
      let styleT = "background: #EEEFF3;border-right:1px solid #fff;border-top:1px solid #fff"

      let head = [
        [{ val: '项目区域', rowspan: 2, style }, { val: '项目名称', rowspan: 2, style }, { val: '清洁工具', colspan: 3, style }, { val: '清洁药剂', colspan: 3, style }, { val: '垃圾处置', colspan: 3, style }, { val: '承载收纳', colspan: 3, style }, { val: '机械配件', colspan: 3, style }, { val: '客用品', colspan: 3, style }, { val: '劳保用品', colspan: 3, style }, { val: '其他', colspan: 3, style }],
        [{ val: '配送峰值', style: styleT }, { val: '已配送', style: styleT }, { val: '建议配送', style: styleT }, { val: '配送峰值', style: styleT }, { val: '已配送', style: styleT }, { val: '建议配送', style: styleT }, { val: '配送峰值', style: styleT }, { val: '已配送', style: styleT }, { val: '建议配送', style: styleT }, { val: '配送峰值', style: styleT }, { val: '已配送', style: styleT }, { val: '建议配送', style: styleT }, { val: '配送峰值', style: styleT }, { val: '已配送', style: styleT }, { val: '建议配送', style: styleT }, { val: '配送峰值', style: styleT }, { val: '已配送', style: styleT }, { val: '建议配送', style: styleT }, { val: '配送峰值', style: styleT }, { val: '已配送', style: styleT }, { val: '建议配送', style: styleT }, { val: '配送峰值', style: styleT }, { val: '已配送', style: styleT }, { val: '建议配送', style: styleT }]
      ]
      let arr = []
      res.forEach(item => {
        arr.push([{ val: item.projectRegion }, { val: item.projectName },
        { val: item.qjgjPeakValue }, { val: item.qjgjNumber }, { val: (+item.qjgjPeakValue - +item.qjgjNumber) },
        { val: item.qjyjPeakValue }, { val: item.qjyjNumber }, { val: (+item.qjyjPeakValue - +item.qjyjNumber) },
        { val: item.lbypPeakValue }, { val: item.ljczNumber }, { val: (+item.lbypPeakValue - +item.ljczNumber) },
        { val: item.czsnPeakValue }, { val: item.czsnNumber }, { val: (+item.czsnPeakValue - +item.czsnNumber) },
        { val: item.jxpjPeakValue }, { val: item.jxpjNumber }, { val: (+item.jxpjPeakValue - +item.jxpjNumber) },
        { val: item.keypPeakValue }, { val: item.keypNumber }, { val: (+item.keypPeakValue - +item.keypNumber) },
        { val: item.lbypPeakValue }, { val: item.lbypNumber }, { val: (+item.lbypPeakValue - +item.lbypNumber) },
        { val: item.qtPeakValue }, { val: item.qtNumber }, { val: (+item.qtPeakValue - +item.qtNumber) },
        ],
        )
      })
      this.deliveryTableData = [...head, ...arr]
      this.load.close()

    },
    // 千分位格式化并保留两位小数
    formatPrice(price) {
      return price.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    // 获取当月天数
    getDaysInMonth() {
      const today = new Date();
      const currentYear = today.getFullYear();
      const currentMonth = today.getMonth() + 1;
      const nextMonth = new Date();
      nextMonth.setFullYear(currentYear, currentMonth, 1);
      nextMonth.setDate(nextMonth.getDate() - 1);
      return nextMonth.getDate();
    },
  }

}
</script>
<style lang="scss" scoped>
.deliveryOrder {
  background: #F2F4FC;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .title {
    line-height: 39px;
    color: rgba(0, 0, 0, 1);
    font-size: 28px;
    text-align: center;
  }

  .deliveryOrder_content {
    flex-grow: 1;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;

    .deliveryOrder_content_top {
      background-color: rgba(255, 255, 255, 0.6);
      display: flex;
      justify-content: space-between;
      border-radius: 6px;
      padding: 22px;
      box-sizing: border-box;
      height: 30%;
    }

    .deliveryOrder_content_bottom {
      background-color: rgba(255, 255, 255, 0.6);
      border-radius: 6px;
      padding: 22px;
      margin-top: 20px;
      flex-grow: 1;
      height: 68%;

      .deliveryTable {
        height: 100%;
      }
    }

  }
}
</style>
